<template>
	<view class="container">
		<!-- 主体部分 -->
		<view class="main">
			<view class="expect-type">
				<view class="title">期望类型</view>
				<view class="list">
					<view v-for="(item, index) in tagTypeList" :key="index"
						:class=" tagTypeList.indexOf(requestObj.expectType) == index ? 'on' : '' ">
						<text @click="handleSelect(index, 0)">{{ item }}</text>
					</view>
				</view>
			</view>
			<view class="job-type">
				<view class="title">期望工种<text>(最多选择3种)</text></view>
				<view class="list">
					<view v-for="item in showJobTypeList" @click="handleCloseJob(item)" :data-item='item'>
						{{ item }}
						<image src="http://images.linglinggong.net/images/main/61.png" mode="aspectFill"></image>
					</view>
					<view class="add" @click="handleOpenModal" v-if="showJobTypeList.length<=2">+ 添加工种</view>
				</view>
			</view>
			<view class="expect-address">
				<view class="title">期望工作地点</view>
				<view class="list">
					<picker mode="selector" :range="addressList" :value="value" @change="bindTypeChange">
						<view class="pick" style="background: transparent;">
							<view v-if="requestObj.expectAddress">{{ addressList[value] }}</view>
							<view class="add" style="background:#F2F2F2; color:rgba(64, 33, 16, 0.5);">+ 添加地点</view>
						</view>
					</picker>
				</view>
			</view>
			<view class="expect-time">
				<view class="title">接单时间</view>
				<view class="list">
					<view v-for="(item, index) in timeList" :key="index"
						:class=" timeList.indexOf(requestObj.expectWorkTime) == index ? 'on' : '' ">
						<text @click="handleSelect(index, 3)">{{ item }}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 按钮 -->
		<view class="button" @click="handleSetUserInfo">确认</view>
		<!-- 弹框 -->
		<view class="modal" v-if="isModalShow">
			<view class="modal-main" :style="{bottom: modalBottom+'rpx'}">
				<view class="modal-title">
					<text>添加工种</text>
					<image @click="handleCloseModal" src="http://images.linglinggong.net/icon1/47.png"
						mode="aspectFill"></image>
				</view>
				<view class="modal-list">
					<view v-for="(jobType, index) in jobTypeList" :key="index" @tap="handleSelect(index, 1)"
						:class="{'on': jobType.selected}">
						<text>{{ jobType.name }}</text>
						<image v-if="jobType.selected" src="http://images.linglinggong.net/icon1/48.png"
							mode="aspectFill"></image>
					</view>
					<view class="input-job" style="width: 250rpx;background: transparent;">
						<input :disabled="disabled" type="text" v-model="myInput" placeholder="自定义工种输入~" maxlength="4"
							@focus="upHeight" @blur="loseBlur" />
					</view>
				</view>
				<view class="buttons">
					<view class="button" @click="handleClearJobType">重置</view>
					<view class="button" @click="handleAddJobType">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import findKey from '@/libs/find-key.js'
	export default {
		data() {
			return {
				disabled: false,
				modalBottom: 0, //弹框bottom
				myInput: '', //我输入的标签
				street: {}, //街道
				userInfo: { //当前用户信息
					user: {
						expectType: "类型不限",
						expectWorkType: '',
						expectAddress: '',
						expectWorkTime: '时间不限',
					},
					params: {},
				},
				isModalShow: false, //是否显示底部弹框
				tagTypeList: [], //期望类型
				tagTypeKeys: [],
				timeList: [], //接单时间
				timeKeys: [],
				addressList: [], //期望工作地点列表
				addressKeys: [], //期望工作地点key
				jobTypeList: [], //可选的期望工种，带select
				oldJobTypeList: [], //旧的期望工种
				oldJobTypeKeys: [], //
				showJobTypeList: [], //显示的期望工种
				selectTagsJob: [], //选中的标签2工种
				value: 0,
				requestObj: { //上传参数
					expectType: '', //期望类型选中标签
					expectAddress: '',
					expectWorkType: '',
					expectWorkTime: '', //接单时间选中标签
				},
			}
		},
		methods: {
			//删除标签
			handleCloseJob(item) {
				// let item = e.currentTarget.dataset.item
				// console.log('删除item', item,this.oldJobTypeList)
				this.handleSelect(this.oldJobTypeList.indexOf(item), 1) //
				// console.log('删除index', this.oldJobTypeList.indexOf(item),)
				this.handleAddJobType()
			},
			// 失去焦点
			loseBlur(event) {
				this.modalBottom = 0
			},
			// 获取焦点
			upHeight(event) {
				this.modalBottom = event.detail.height
			},
			// 获取标签内容和选中的标签
			async get_all_property_list() {
				this.getMyStreet()
				let res = await this.$fetch(this.$api.get_all_property_list, {}, 'GET')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				//期望类型
				this.tagTypeList = Object.values(res.data.dlg_expect_type)
				this.tagTypeKeys = Object.keys(res.data.dlg_expect_type)
				this.timeList = Object.values(res.data.dlg_expect_workTime)
				this.timeKeys = Object.keys(res.data.dlg_expect_workTime)
				this.addressKeys = Object.keys(this.street)
				this.addressList = Object.values(this.street)
				//期望工种
				this.oldJobTypeList = Object.values(res.data.dlg_expect_work_type) //工种所有选择项
				this.oldJobTypeKeys = Object.keys(res.data.dlg_expect_work_type)
				// 改造oldJobTypeList，配置的选项成为jobTypeList[{name:'',selected: false},{}]
				this.jobTypeList = []
				this.oldJobTypeList.forEach((item) => {
					this.jobTypeList.push({
						name: item,
						selected: false
					})
				})
				// console.log('配置+jobTypeList', this.jobTypeList)
				// 将自定义工种遍历加入jobTypeList
				if (this.userInfo.user.expectWorkType) {
					this.userInfo.user.expectWorkType.split(',').forEach((item) => {
						// 如果有自定义工种，添加到jobTypeList和oldJobTypeList
						if (this.oldJobTypeList.indexOf(item) == -1) {
							this.jobTypeList.push({
								name: item,
								selected: false
							})
							this.oldJobTypeList.push(item)
						}
					})
				}
				// console.log('配置+自己所有标签', this.jobTypeList)
				// 初始化数据
				this.initData()
			},
			// 初始化数据
			initData() {
				// 初始化期望类型
				if (this.userInfo.user.expectType) {
					this.handleSelect(this.tagTypeList.indexOf(this.userInfo.user.expectType), 0)
				}
				// 初始化期望工种
				if (this.userInfo.user.expectWorkType) {
					this.userInfo.user.expectWorkType.split(',').forEach((item) => {
						this.handleSelect(this.oldJobTypeList.indexOf(item), 1) //
						this.handleAddJobType()
					})
				}
				// 初始化工作地点
				this.value = this.addressKeys.indexOf(this.userInfo.user.expectAddress)
				this.requestObj.expectAddress = this.addressKeys[this.addressKeys.indexOf(this.userInfo.user
					.expectAddress)]
				// 初始化接单时间
				this.handleSelect(this.timeList.indexOf(this.userInfo.user.expectWorkTime), 3)
			},
			//选中标签，类型、工种、时间
			handleSelect(index, flag) {
				if (flag == 0) { // 期望类型
					this.requestObj.expectType = this.tagTypeList[index]
				} else if (flag == 1) { // 期望工种
					console.log(this.jobTypeList)
					console.log(index)
					let jobType = this.jobTypeList[index] //{name：'', selected: ''}
					console.log(jobType)
					this.$set(jobType, 'selected', !jobType.selected)
					//得到新数组，选中的数组
					this.selectTagsJob = []
					this.jobTypeList.forEach(item => {
						if (item.selected) {
							this.selectTagsJob.push(item.name)
						}
					})
					this.handleAddJobType()
					// console.log('this.selectTagsJob', this.selectTagsJob)
				} else if (flag == 3) { // 接单时间
					this.requestObj.expectWorkTime = this.timeList[index]
				}
			},
			// 选择工作地点
			bindTypeChange(e) {
				console.log(e)
				var value = e.detail.value
				this.value = value
				console.log('选择工作地点', this.value)
				console.log('~~~~', this.street)
				console.log('~~~~', this.addressKeys)
				this.requestObj.expectAddress = this.addressKeys[value]
			},
			//打开弹框
			handleOpenModal() {
				this.isModalShow = true
				this.myInput = ''
			},
			//关闭弹框
			handleCloseModal() {
				this.isModalShow = false
			},
			//显示已选择期望工种
			handleAddJobType() {
				if (this.myInput && this.selectTagsJob.length > 2) {
					return uni.showToast({
						title: '工种不能多于3个',
						icon: 'none'
					})
				} else if (!this.myInput && this.selectTagsJob.length > 3) {
					return uni.showToast({
						title: '工种不能多于3个',
						icon: 'none'
					})
				}
				this.isModalShow = false
				this.showJobTypeList = this.selectTagsJob
				if (this.myInput) {
					this.showJobTypeList.push(this.myInput) //加入刚输入的工种标签
					this.jobTypeList.push({
						name: this.myInput,
						selected: true
					})
					this.oldJobTypeList.push(this.myInput)
				}
				this.requestObj.expectWorkType = ''
				this.showJobTypeList.forEach((item) => {
					this.requestObj.expectWorkType = this.requestObj.expectWorkType + ',' + item
				})
				this.requestObj.expectWorkType = this.requestObj.expectWorkType.slice(1)
				this.myInput = ''
			},
			// 重置期望工种split
			handleClearJobType() {
				this.showJobTypeList = []
				this.selectTagsJob = []
				this.myInput = ''
				if (this.selectTagsJob) {
					this.jobTypeList.forEach(item => {
						this.$set(item, 'selected', false)
					})
				}
			},
			//确认修改用户信息
			async handleSetUserInfo() {
				console.log('requestObj提交前', this.requestObj)
				let res = await this.$fetch(this.$api.upd_user, this.requestObj, 'POST')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				uni.showToast({
					title: '修改成功~',
					icon: 'none'
				})
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/tabBar-2/tabBar-2'
					})
				}, 1000)
				this.getUserInfo()
			},
			// 获取当前用户信息
			async getUserInfo() {
				let res = await this.$fetch(this.$api.get_current_user, {}, 'GET')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				// 整理数据,res.data.user为空，则改为""
				Object.getOwnPropertyNames(res.data.user).forEach(function(key) {
					res.data.user[key] = res.data.user[key] == null ? '' : res.data.user[key]
				})
				uni.setStorageSync('userInfo', res.data)
				uni.setStorageSync('userType', res.data.userType)
				this.userInfo = res.data
				this.userType = uni.getStorageSync('userType')
				uni.setStorageSync("level", res.data.user.level) //用户等级
			},
			// 获取街道
			getMyStreet() {
				// let areaCode = uni.getStorageSync('region').slice(0,6)
				let areaCode = '330783'
				let allStreet = uni.getStorageSync('street')
				let obj = {}
				for (let key in allStreet) {
					if (key.indexOf(areaCode) !== -1) {
						obj[key] = allStreet[key]
					}
				}
				this.street = obj
			},
		},
		onShow() {
			this.userInfo = uni.getStorageSync('userInfo')
			this.get_all_property_list() //获取标签和显示的标签
		}
	}
</script>
<style lang="less" scoped>
	.container {
		overflow: hidden;
		// border: 1px solid #000000;
		position: relative;

		&>.main {
			&>view {
				background-color: #FFFFFF;
				margin-top: 30rpx;
				padding: 30rpx 30rpx 0;

				&>.title {
					height: 40rpx;
					margin-bottom: 30rpx;
					display: flex;
					align-items: center;
					font-weight: bold;

					text {
						margin-left: 10rpx;
						font-size: 12px;
						color: rgba(64, 33, 16, 0.50);
					}
				}

				&>.list {
					// border: 1px solid #000000;
					display: flex;
					flex-wrap: wrap;
					color: rgba(64, 33, 16, 0.50);

					.add {
						width: 192rpx;
					}

					&>view {
						width: 150rpx;
						height: 60rpx;
						margin-right: 30rpx;
						margin-bottom: 30rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						background-color: #F2F2F2;
						border-radius: 2px;
					}

					.on {
						background: #FCC928;
						color: #402110;
					}

					&>view:nth-child(4n) {
						margin-right: 0;
					}
				}
			}

			&>.job-type {
				&>.list {
					&>view {
						position: relative;
						background: #FCC928;
						color: #402110;

						&>image {
							position: absolute;
							right: -16rpx;
							top: -16rpx;
							z-index: 9;
							width: 32rpx;
							height: 32rpx;
						}
					}

					.add {
						background-color: #F2F2F2;
						color: rgba(64, 33, 16, 0.50);
					}
				}
			}

			&>.expect-address {
				.pick {
					display: flex;
					flex-wrap: wrap;
					width: 690rpx !important;
					justify-content: flex-start !important;

					&>.add {
						width: 192rpx;
						color: rgba(64, 33, 16, 0.50);
						background-color: #F2F2F2;
						border-radius: 2px;
					}

					&>view {
						width: 150rpx;
						height: 60rpx;
						margin-right: 30rpx;
						margin-bottom: 30rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						background: #FCC928;
						color: #402110;
					}
				}
			}
		}

		// 按钮
		&>.button {
			height: 100rpx;
			width: 100vw;
			position: fixed;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #FCC928;

			&:active {
				opacity: 0.7;
			}
		}

		//弹框
		&>.modal {
			z-index: 11;
			position: fixed;
			bottom: 0;
			height: 100vh;
			width: 100vw;
			background-color: rgba(0, 0, 0, 0.40);

			&>.modal-main {
				position: fixed;
				bottom: 0;
				padding: 30rpx;
				background: #FFFFFF;
				box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.05) inset;
				border-radius: 17px 17px 0 0;

				&>.modal-title {
					margin-bottom: 50rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					height: 48rpx;

					&>text {
						font-weight: bold;
						font-size: 17px;
						letter-spacing: -0.41px;
					}

					&>image {
						position: absolute;
						right: 30rpx;
						width: 42rpx;
						height: 42rpx;
					}
				}

				&>.modal-list {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					margin-bottom: 50rpx;

					// border: 1px solid;
					&>view {
						position: relative;
						width: 100rpx;
						height: 40rpx;
						padding: 10rpx 20rpx;
						margin: 0 10rpx;
						// margin-right: 30rpx;
						margin-bottom: 30rpx;
						border: 1px solid rgba(64, 33, 16, 0.50);
						border-radius: 2px;
						text-align: center;

						&>image {
							position: absolute;
							right: 0rpx;
							bottom: 0;
							width: 24rpx;
							height: 24rpx;
						}
					}

					&>view:nth-child(4n) {
						// margin-right: 0;
					}

					.on {
						border-color: #FCC928;
						color: #F39B19;
					}
				}

				&>.buttons {
					display: flex;

					&>.button {
						width: 330rpx;
						height: 80rpx;
						border-radius: 2px;
						display: flex;
						align-items: center;
						justify-content: center;

						&:active {
							opacity: 0.7;
						}
					}

					.button:nth-child(1) {
						background: #FCC928;
						margin-right: 30rpx;
					}

					.button:nth-child(2) {
						background-color: #F39B19;
					}
				}
			}
		}
	}
</style>